<template>
    <div>
        <div class="header">
            <ul class="header1">
                <li><router-link to="/location">{{$store.state.cityName}}</router-link></li>
                <li>影院</li>
                <li><img src="@/assets/imgs/search.png" alt=""></li>

            </ul>
            <div class="header2">
                <!-- <li>全城<img src="@/assets/imgs/down-arrow.png"></li>
                <li>APP订票<img src="@/assets/imgs/down-arrow.png"></li>
                <li>最近去过<img src="@/assets/imgs/down-arrow.png"></li> -->
            <van-dropdown-menu class="everyli" active-color="#ff5f16">
           <van-dropdown-item class="everylist" v-model="value1"/>
            </van-dropdown-menu>
            <van-dropdown-menu class="everyli" active-color="#ff5f16">
           <van-dropdown-item class="everylist" v-model="value2" :options="option2" />
            </van-dropdown-menu>
            <van-dropdown-menu class="everyli" active-color="#ff5f16">
           <van-dropdown-item class="everylist" v-model="value3" :options="option3" />
            </van-dropdown-menu>

            </div>
        </div>
        <cinema-list class="listPart"></cinema-list>
    </div>
</template>

<style lang="scss" scoped>
.header{
    width:100%;
    position: fixed;
    left:0;
    top:0;
    border-bottom:1px solid lightgrey;
    background-color:white;
    .header1{
        height:0.88rem;
    width:100%;
        li:nth-child(1){
            width:1.025rem;
            height:0.88rem;
            line-height:0.88rem;
            text-align: center;
            float:left;
        }
                        li:nth-child(2){
            width:5.55rem;
            height:0.88rem;
            line-height:0.88rem;
            text-align: center;
            float:left;
            font-size: 0.34rem;
        }

                li:nth-child(3){
            height:0.88rem;
            line-height:0.88rem;
            text-align: center;
            float:left;
            margin-top:0.15rem;

        }

    }
    .header2{
        height:0.88rem;
        .everyli{
            width:2.4976rem;
            float: left;
            height:0.88rem;
            text-align: center;
            line-height: 0.88rem;
            // img{
            //     width:0.16rem;
            //     height:0.06rem;
            //     margin: 0 0 0 0.04rem;
            //     padding:0 0 0.06rem 0.04rem;
            // }
        }
    }
}
.listPart{
    margin-bottom:0.98rem;
    margin-top:1.86rem;
}

</style>

<script>
import CinemaList from './component/list'
export default {
    data(){
        return{
       value1:0,
       value2:0,
       value3:0,
       option1: [
        { text: '西城区', value: 0 },
        { text: '海淀区', value: 1 },
        { text: '高新区', value: 2 }
      ],
             option2: [
        { text: 'APP订票', value: 0 },
        { text: '前台兑换', value: 1 },
      ],
                   option3: [
        { text: '最近去过', value: 0 },
        { text: '离我最近', value: 1 },
      ]
        }
    },
     components:{
       CinemaList
   } 
}
</script>